enhancement/ripple #3882

nekosaur · 2018-04-19T16:49:56Z

Description

Updated ripple effect to hopefully more closely resemble material design ripple.

I was unable to find a good single solution for both rectangular and circular ripples, so I've added a circle option to the ripple directive. Someone smarter than me might have a better solution?

Motivation and Context

because

How Has This Been Tested?

with provided markup

Markup:

<template>
  <v-app id="inspire">
    <v-container fluid fill-height>
      <v-layout column wrap fill-height align-center justify-center>
        <v-flex class="d-flex no-grow align-center">
          <v-card class="ma-3" ripple height="132px" width="232px"></v-card>
          <v-card :ripple="{ circle: true }" height="200px" width="200px" class="ma-3 border"></v-card>
          <v-btn color="purple" flat>baseline</v-btn>
          <v-btn>hello</v-btn>
          <v-btn icon large>
            <v-icon>home</v-icon>
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
    })
  }
</script>

<style lang="stylus">
  .border
    border-radius: 50% !important

  .no-grow
    flex-grow: 0

  .no-select
    user-select: none
</style>

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

The PR title is no longer than 64 characters.
The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
My code follows the code style of this project.
My change requires a change to the documentation.
I have created a PR in the documentation with the necessary changes.

codecov · 2018-04-19T16:54:33Z

Codecov Report

Merging #3882 into dev will decrease coverage by 0.23%.
The diff coverage is 26.82%.

@@            Coverage Diff            @@
##              dev   #3882      +/-   ##
=========================================
- Coverage   86.84%   86.6%   -0.24%     
=========================================
  Files         160     158       -2     
  Lines        4249    4017     -232     
  Branches     1350    1271      -79     
=========================================
- Hits         3690    3479     -211     
+ Misses        449     436      -13     
+ Partials      110     102       -8

Impacted Files	Coverage Δ
src/components/VBtn/VBtn.ts	`88.63% <100%> (+1.13%)`	⬆️
src/mixins/routable.ts	`81.25% <100%> (ø)`	⬆️
src/directives/ripple.ts	`35.89% <21.05%> (-5.6%)`	⬇️
src/components/VMenu/mixins/menu-keyable.js	`57.89% <0%> (-15.79%)`	⬇️
src/mixins/validatable.js	`83.01% <0%> (-7.9%)`	⬇️
src/mixins/selectable.js	`87.17% <0%> (-5.68%)`	⬇️
src/components/VForm/VForm.js	`75% <0%> (-5.65%)`	⬇️
src/components/VMenu/mixins/menu-position.js	`44% <0%> (-4%)`	⬇️
src/components/VTextField/VTextField.js	`90% <0%> (-2.53%)`	⬇️
... and 65 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8dc4ef5...e70764f. Read the comment docs.

KaelWD · 2018-04-30T14:23:22Z

src/components/VBtn/VBtn.js

+    computedRipple () {
+      const defaultRipple = this.icon || this.fab ? { circle: true } : true
+      if (this.disabled) return false
+      else return this.ripple || defaultRipple


What if I do :ripple="false"?

to allow for circle: true option when using icon prop

KaelWD · 2018-05-13T05:24:46Z

src/directives/ripple.ts

@@ -15,13 +19,39 @@ declare global {
      enabled?: boolean
      centered?: boolean
      class?: string
+      circle?: boolean
    }
  }
 }

 interface RippleOptions {


Either export this or move it to types/*.d.ts

KaelWD · 2018-05-13T05:26:26Z

src/components/VBtn/VBtn.ts

@@ -85,6 +85,11 @@ const VBtn = mixins(
      return (!this.outline && !this.flat)
        ? this.addBackgroundColorClassChecks(classes)
        : this.addTextColorClassChecks(classes)
+    },
+    computedRipple (): any {


This returns RippleOptions | boolean, try to avoid using any where possible.

KaelWD · 2018-05-13T05:27:21Z

src/components/VBtn/VBtn.ts

@@ -41,7 +41,7 @@ const VBtn = mixins(
    outline: Boolean,
    ripple: {
      type: [Boolean, Object],
-      default: true
+      default: null
    },


... } as PropValidator<RippleOptions | boolean | null>

KaelWD · 2018-05-13T05:29:23Z

src/mixins/routable.ts

@@ -26,6 +26,12 @@ export default Vue.extend({
    target: String
  },

+  computed: {
+    computedRipple (): any {


KaelWD · 2018-05-13T05:30:21Z

src/mixins/routable.ts

-          value: (this.ripple && !this.disabled) ? this.ripple : false
-        }] as any, // TODO
+          value: this.computedRipple
+        }] as any,


I should have left a better comment, the TODO is to remove as any when vuejs/vue#8013 is fixed

KaelWD · 2018-06-16T13:47:08Z

Are we still doing this? Last time I checked it broke radios and checkboxes.

nekosaur · 2018-06-16T17:34:16Z

I'll have a look

johnleider · 2018-07-09T01:59:41Z

Closing due to inactivity.

lock · 2019-04-15T02:30:39Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

KaelWD reviewed Apr 30, 2018

View reviewed changes

nekosaur added 3 commits May 12, 2018 15:50

fix: decreased hide timeout

aa93200

enh: refactored btn and routable

9bf7811

to allow for circle: true option when using icon prop

fix(v-ripple): stuff

feafaf6

nekosaur force-pushed the enh/ripple branch from 458086a to feafaf6 Compare May 12, 2018 14:54

KaelWD reviewed May 13, 2018

View reviewed changes

nekosaur and others added 3 commits May 13, 2018 14:00

fix: exporting RippleOptions, updated ts defs

02a6a75

fix(ripple): bug when setting ripple to false

59ead24

test(VBtn): make sure ripple can be disabled

0f54af6

chewy94 added the pending team review The issue is pending a full team review label Jun 12, 2018

Merge branch 'dev' into enh/ripple

e70764f

KaelWD removed the pending team review The issue is pending a full team review label Jun 16, 2018

johnleider closed this Jul 9, 2018

nekosaur deleted the enh/ripple branch August 25, 2018 08:33

lock bot locked as resolved and limited conversation to collaborators Apr 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enhancement/ripple #3882

enhancement/ripple #3882

nekosaur commented Apr 19, 2018

codecov bot commented Apr 19, 2018 •

edited

Loading

KaelWD Apr 30, 2018

KaelWD May 13, 2018

KaelWD May 13, 2018

KaelWD May 13, 2018

KaelWD May 13, 2018

KaelWD May 13, 2018

KaelWD commented Jun 16, 2018

nekosaur commented Jun 16, 2018

johnleider commented Jul 9, 2018

lock bot commented Apr 15, 2019

enhancement/ripple #3882

enhancement/ripple #3882

Conversation

nekosaur commented Apr 19, 2018

Description

Motivation and Context

How Has This Been Tested?

Markup:

Types of changes

Checklist:

codecov bot commented Apr 19, 2018 • edited Loading

Codecov Report

KaelWD Apr 30, 2018

Choose a reason for hiding this comment

KaelWD May 13, 2018

Choose a reason for hiding this comment

KaelWD May 13, 2018

Choose a reason for hiding this comment

KaelWD May 13, 2018

Choose a reason for hiding this comment

KaelWD May 13, 2018

Choose a reason for hiding this comment

KaelWD May 13, 2018

Choose a reason for hiding this comment

KaelWD commented Jun 16, 2018

nekosaur commented Jun 16, 2018

johnleider commented Jul 9, 2018

lock bot commented Apr 15, 2019

codecov bot commented Apr 19, 2018 •

edited

Loading